<template>
	<view class="index">
		<swiper class="topSwiper" autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item class="topSwiperItem" v-for="(item,index) in banner" :key="item.id">
				<image :src="item.img_url" class="bannerItem" @click="toInfo(item.uri_type,item.uri)"></image>
			</swiper-item>
		</swiper>
		<!-- 按钮盒子 -->
		<view class="btnBox">
			<view class="btnBox1">
				<!-- 跳转直播 -->
				<image :src="baseUrl+'/img/index/living.gif'" class="livingBtn" v-if="isLive==1"
					@click="!isLogin?$navto.navto('/pages/login/login'):$navto.navto('/bundle/pages/broadcast/broadcast')">
				</image>
			</view>
			<view class="btnBox2">
				<!-- 分享按钮 -->
				<image :src="baseUrl+'/img/index/recommend.png'" class="recommendBtn"></image>
				<!-- 获取BMI结果v-if="!isLogin" -->
				<image :src="baseUrl+'/img/index/bmi.png'" class="bmiBtn" @click="questionnaire()">
				</image>
				<button open-type="share" class="shareBtn"></button>
			</view>
			<view class="btnBox3">
				<image :src="baseUrl+'/img/index/arrow.png'" class="arrowBtn"></image>
			</view>
			<view class="btnBox4">
				<router-link to="/bundle/pages/user_sign/user_sign">
					<image :src="baseUrl+'/img/index/mrqd.png?v=1.0'" class="box4Item"></image>
				</router-link>
				<image :src="baseUrl+'/img/index/jfcj.png?v=1.0'" class="box4Item"
					@click="$navto.navto('/bundle/pages/luck_draw/luck_draw',{id:drawId})"></image>
				<image :src="baseUrl+'/img/index/yxhw.png?v=1.0'" class="box4Item"
					@click="$switchTab('/pages/category/category')"></image>
				<image :src="baseUrl+'/img/index/jkkc.png?v=1.0'" @click="$switchTab('/pages/course/course')" class="box4Item">
				</image>
			</view>
			<image :src="baseUrl+'/img/index/ai1.png?v=1.1'" class="ai"  @click="$navto.navto('/course/ai/ai')">
			<!-- 活动专区轮播 -->
			<view class="activitySwiperBox">
				<image :src="baseUrl+'/img/index/activityZone.png?v=1.1'" class="activitySwiperLabel"></image>
				<swiper class="activitySwiper" autoplay="true" :interval="3000" :duration="1000" circular="true">
					<swiper-item class="activitySwiperItem" v-for="(item,index) in activitySwiper" :key="item.id">
						<block>
							<image :src="item.img_url" class="activitySwiperImg" @click="jump(item.uri,item.uri_type)">
							</image>
							<button open-type="share" v-if="item.uri_type==12" class="shareBtn1"></button>
						</block>
					</swiper-item>
				</swiper>
			</view>
			<view class="btnBox5">
				<image :src="baseUrl+'/img/index/xfyl.png'" class="box5Item"></image>
				<image :src="baseUrl+'/img/index/fsjh.png'" class="box5Item"></image>
				<image :src="baseUrl+'/img/index/slcf.png'" class="box5Item"></image>
			</view>
		</view>
		<view class="line"></view>
		<!-- 健康学院 -->
		<view class="healthBox">
			<image :src="baseUrl+'/img/index/health.png'" class="healthTitle"></image>
			<uni-swiper-dot :info="schoolHealth" :current="schoolHealthSwiper.current" :mode="schoolHealthSwiper.mode"
				:dots-styles="schoolHealthSwiper.dotsStyles">
				<swiper class="swiperBox" @change="change2" autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiper-item" v-for="(item,index) in schoolHealth" :key="index">
						<image :src="item.home_cover" class="itemImg"
							@click="$navto.navto('/course/info/info',{id:item.id})">
						</image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<text class="more"
				@click="$navto.navto('/course/special/special')">MORE >
			</text>
		</view>
		<!-- 新品上架 -->
		<view class="newBox">
			<image :src="baseUrl+'/img/index/new.png'" class="newTitle"></image>
			<image :src="bigCover[0].img_url" class="newCover"
				@click="$navto.navto('/pages/goods_detail/goods_detail',{id:bigCover[0].uri})">
			</image>
			<view class="newItemContainer">
				<view class="newItemBoxOut">
					<view class="newItemBoxInner" v-for="(item,index) in newProduct" :key="item.id"
						@click="$navto.navto('/pages/goods_detail/goods_detail',{id:item.id})">
						<image :src="item.min_cover" class="newItemCover"></image>
						<text class="newItemName">{{item.name}}</text>
						<view class="newItemPriceBox">
							<text class="priceIconNew">￥</text>
							<text class="priceNew">{{item.sell_price}}</text>
							<text class="priceIconOld">￥</text>
							<text class="priceOld">{{item.lineation_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 当季推荐 -->
		<view class="recommendBox">
			<image :src="baseUrl+'/img/index/recommendaction.png'" class="recommendTitle"></image>
			<image :src="bigCover[1].img_url" class="newCover"
				@click="$navto.navto('/pages/goods_detail/goods_detail',{id:bigCover[1].uri})">
			</image>
			<view class="newItemContainer">
				<view class="newItemBoxOut">
					<view class="newItemBoxInner" v-for="(item,index) in recommend" :key="item.id"
						@click="$navto.navto('/pages/goods_detail/goods_detail',{id:item.id})">
						<image :src="item.min_cover" class="newItemCover"></image>
						<text class="newItemName">{{item.name}}</text>
						<view class="newItemPriceBox">
							<text class="priceIconNew">￥</text>
							<text class="priceNew">{{item.sell_price}}</text>
							<text class="priceIconOld">￥</text>
							<text class="priceOld">{{item.lineation_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动专区 -->
		<view class="activityBox">
			<image :src="baseUrl+'/img/index/activity.png'" class="activityTitle"></image>
			<uni-swiper-dot :info="activity" :current="healthSwiper.current" :mode="healthSwiper.mode"
				:dots-styles="healthSwiper.dotsStyles">
				<swiper class="swiperBox" @change="change">
					<swiper-item class="swiper-item" v-for="(item,index) in activity" :key="index"
						@click="$navto.navto('/course/training_camp/training_camp',{id:item.id})">
						<image :src="item.min_cover" class="itemImg"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<text class="more"
				@click="$navto.navto('/course/category1/category1')">MORE >
			</text>
		</view>
		<!-- 客户案例 -->
		<view class="customerBox">
			<image :src="baseUrl+'/img/index/customer.png'" class="customerTitle"></image>
			<uni-swiper-dot :info="caseList" :current="customerSwiper.current" :mode="customerSwiper.mode"
				:dots-styles="customerSwiper.dotsStyles">
				<swiper class="swiperBox" @change="change1" :current='customerSwiper.current' previous-margin="100rpx"
					next-margin="100rpx">
					<swiper-item class="swiper-item" v-for="(item,index) in caseList" :key="item.id">
						<image :src="item.img_url" class="itemImg"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 专业团队 -->
		<view class="cellularBox">
			<image :src="baseUrl+'/img/index/cellular.png'" class="cellularTitle"></image>
			<image :src="baseUrl+'/img/index/about.png'" class="about"></image>
		</view>
	</view>
</template>
<script>
	import {
		apiIndex
	} from '@/api/store'
	import {
		apiVisit
	} from '@/api/app'
	import {
		mapActions
	} from 'vuex'
	import openAdvertisement from '../../components/open-advertisement/open-advertisement.vue'
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import Cache from '@/utils/cache'
	import {
		INVITE_CODE
	} from '@/config/cachekey'
	export default {
		components: {
			openAdvertisement
		},
		data() {
			return {
				// baseUrl: `${baseURL}`,
				baseUrl: `https://cdn.zkjialan.com/`,
				isDischarge: false,
				styles: {},
				pagesData: [],
				loading: false,
				scrollTop: 0,
				policyStorageKey: 'had_read_privacy', // 保存是否同意协议缓存信息的key
				showTabbar: true, // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
				banner: '',
				percent: 0,
				offTip: false,
				showPrivacyPopup: false, //微信用户隐私协议
				schoolHealthSwiper: {
					current: 0,
					mode: 'default',
					dotsStyles: {
						bottom: 10,
						border: '1px rgba(255, 255, 255, 1) solid',
						backgroundColor: 'grey',
						selectedBackgroundColor: '#f08329',
						selectedBorder: '1px rgba(255, 255, 255, 1) solid'
					},
				},
				showopenAd: false,
				// 轮播配置
				healthSwiper: {
					current: 0,
					mode: 'default',
					dotsStyles: {
						bottom: 10,
						border: '1px rgba(255, 255, 255, 1) solid',
						backgroundColor: 'grey',
						selectedBackgroundColor: '#f08329',
						selectedBorder: '1px rgba(255, 255, 255, 1) solid'
					},
				},
				customerSwiper: {
					current: 1,
					mode: 'round',
					dotsStyles: {
						bottom: 10,
						border: '1px rgba(255, 255, 255, 1) solid',
						backgroundColor: 'grey',
						selectedBackgroundColor: '#000000',
						selectedBorder: '1px rgba(255, 255, 255, 1) solid'
					},
				},
				userId: '',
				newProduct: '', //新品
				recommend: '', //推荐
				caseList: '', //客户案例
				activity: '', //活动专区
				bigCover: '', //大图
				isLive: 0,
				schoolHealth: '',
				isSign: true,
				activitySwiper: '',
				islogin: '',
				drawId:''
			}
		},
		methods: {
			
			questionnaire() { //未登录去登录
				// 查询是否填写过问卷
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				this.$request.get(`shopapi/Questionnaire/user_list_questionnaire?page_no=1&page_size=10`).then(
					res => {
						if (res.data.data.lists.length > 0) {
							this.$navto.navto('/user/questionnaire_record/questionnaire_record')
						} else {
							this.$navto.navto('/pages/questionnaire/questionnaire')
						};
					})
			},
			jump(uri, type) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				if (type == 8) {
					this.$navto.navto('/bundle/pages/luck_draw/luck_draw', {
						id: uri
					})
				}
				this.$navto.navto(uri)
			},
			toUser() {
				this.isSign = false;
				this.$switchTab('/pages/user/user');
			},
			toInfo(type, id) {
				// if (!this.isLogin) return this.$Router.push('/pages/login/login')
				if (type == 1) { //1商品Id 2 课程Id 3 直播Id 4 虚拟商品Id
					this.$navto.navto('/pages/goods_detail/goods_detail', {
						id: id
					});
				} else if (type == 2) {
					this.$navto.navto('/course/info/info', {
						id: id
					});
				} else if (type == 3) {
					this.$navto.navto('/course/info/info', {
						id: id
					});
				} else if (type == 4) {
					this.$navto.navto('/course/training_camp/training_camp', {
						id: id
					});
				} else if (type == 5) { //秒杀
					this.$navto.navto('/bundle/pages/goods_seckill/goods_seckill', {
						id: id
					});
				} else if (type == 6) { //拼团
					this.$navto.navto('/bundle/pages/goods_team/goods_team', {
						id: id
					});
				} else if (type == 7) { //砍价
					this.$navto.navto('/bundle/pages/goods_bargain/goods_bargain', {
						id: id
					});
				} else if (type == 8) { //抽奖
					this.$navto.navto('/bundle/pages/luck_draw/luck_draw', {
						id: id
					});
				} else if (type == 13) { //普通商品
					uni.setStorageSync('categoryType', '2');
					uni.switchTab({
						url: 'pages/category/category'
					});
				} else if (type == 14) { //组合商品
					uni.setStorageSync('categoryType', '1');
					uni.switchTab({
						url: 'pages/category/category'
					});
				} else if (type == 15) { //课程
					uni.switchTab({
						url: 'pages/course/course'
					});
				}
			},
			change(e) { //改变轮播指示点
				this.healthSwiper.current = e.detail.current;
			},
			change1(e) { //改变轮播指示点
				this.customerSwiper.current = e.detail.current;
			},
			change2(e) { //改变轮播指示点
				this.schoolHealthSwiper.current = e.detail.current;
			},
			...mapActions(['getConfig', 'getDecorateConfig', 'getUser']),
			handleRetry() {
				this.getConfig()
				this.getDecorateConfig()
				this.getUser()
			},
			getPageInfo() {
				apiIndex()
					.then((res) => {
						const {
							common: {
								title
							},
							common,
							content
						} = res

						uni.setNavigationBarTitle({
							title
						})
						this.styles = common
						this.tempData = content.map((item, index) => {
							return {
								index,
								value: item
							}
						})
						this.splitSetData()
					})
					.finally(() => {
						uni.stopPullDownRefresh()
						this.loading = false
					})
			},
			splitSetData() {
				const item = this.tempData.shift()
				if (!item) return
				this.$set(this.pagesData, item.index, Object.freeze(item.value))
				setTimeout(() => {
					this.splitSetData()
				}, 100)
			},
			onPageScroll(e) {
				const top = uni.upx2px(100)
				const {
					scrollTop
				} = e
				this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			},
			clearIntervalFunc() {
				this.offTip = false
			},
			clearTipAuto() {
				let timeid = null
				if (timeid) {
					clearTimeout(timeid)
				}
				timeid = setTimeout(() => {
					this.clearIntervalFunc()
				}, 5000)
			},
			handleoPenAd() {
				this.showopenAd = true
			}
		},
		computed: {
		},
		onPullDownRefresh() {
			this.getPageInfo()
		},
		onPageScroll(e) {
			const {
				scrollTop
			} = e
			this.scrollTop = scrollTop
		},
		onLoad(options) {
			// 获取轮播图
			this.$request.get(`shopapi/home/slideshow_list?type=1`).then(res => {
				this.banner = res.data.data.lists;
			})
			// 健康学院
			this.$request.get(`course/course/lists`).then(res => {
				this.schoolHealth = res.data.data.lists;
			})
			// 获取新品上架
			this.$request.get(`shopapi/goods/lists?new_recommend=1`).then(res => {
				this.newProduct = res.data.data.lists;
			})
			// 当季推荐
			this.$request.get(`shopapi/goods/lists?season_recommend=1`).then(res => {
				this.recommend = res.data.data.lists;
			})
			// 获取客户案例
			this.$request.get(`shopapi/home/slideshow_list?type=3`).then(res => {
				this.caseList = res.data.data.lists;
			})
			// 获取活动专区
			this.$request.get(`shopapi/Goods/lists?goods_type=2`).then(res => {
				this.activity = res.data.data.lists;
			})
			// 获取活动专区轮播图
			this.$request.get(`shopapi/home/slideshow_list?type=8`).then(res => {
				this.activitySwiper = res.data.data.lists;
				//拿到抽奖id
				for (const key in this.activitySwiper) {
				  if (this.activitySwiper[key].uri_type === 8) {
				    this.drawId = this.activitySwiper[key].uri;
				    break;
				  }
				}
			})
			// 获取大图
			this.$request.get(`shopapi/Home/season_product`).then(res => {
				this.bigCover = res.data.data;
				if (this.bigCover[2].img_url) {
					this.isLive = 1;
				}
			})
			if (uni.getLaunchOptionsSync().scene) { //来源场景
				Cache.set('scene', uni.getLaunchOptionsSync().scene)
			}
			if (uni.getLaunchOptionsSync().query.invite_code) { //获取邀请码
				Cache.set(INVITE_CODE, uni.getLaunchOptionsSync().query.invite_code)
			}
			// uni.hideTabBar()
			// #ifdef MP-WEIXIN
			wx.getPrivacySetting({
				success: (res) => {
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						this.showPrivacyPopup = true
					} else {
						this.showopenAd = true
					}
				},
				fail: (err) => {
				}
			})
			// #endif
			// #ifndef MP
			this.showopenAd = true
			// #endif

			this.getPageInfo()
			// 访客记录
			apiVisit()
		},
		onHide() {
			this.isDischarge = true
		},
		onShow(options) { //判断用户今日是否签到
			this.islogin = this.isLogin;
			this.isDischarge = false
			// #ifdef MP
			const updateManager = wx.getUpdateManager();
			updateManager.onCheckForUpdate(function(res) {
				// 请求完新版本信息的回调
			})
			updateManager.onUpdateReady(function() {
				wx.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success: function(res) {
						if (res.confirm) {
							updateManager.applyUpdate()
						}
					}
				})
			})
			updateManager.onUpdateFailed(function() {
			})
			// #endif
		},
		watch: {},
		onReady() {
			// #ifdef MP
			const _this = this
			wx.checkIsAddedToMyMiniProgram({
				success(res) {
					if (!res.added) {
						_this.offTip = true
						_this.clearTipAuto()
					} else {
						return
					}
				}
			})
			// #endif
		},
	}
</script>

<style lang="scss">
	.ai{
		width: 676rpx;
		height: 277rpx;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}
	.signBox {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.7);

		.sign {
			width: 550rpx;
			height: 677rpx;
			margin-left: 126rpx;
			margin-top: 400rpx;
		}

		.close {
			width: 75rpx;
			height: 75rpx;
			margin-left: 340rpx;
			margin-top: 70rpx;
		}
	}

	.topSwiper {
		width: 750rpx;
		height: 1560rpx;

		.topSwiperItem,
		.bannerItem {
			width: 100%;
			height: 100%;
		}
	}

	.cellularBox {
		width: 100%;
		margin-top: 125rpx;
		margin-bottom: 40rpx;

		.cellularTitle {
			width: 740rpx;
			height: 96rpx;
			margin-left: 40rpx;
		}

		.about {
			width: 670rpx;
			height: 1280rpx;
			margin-left: 40rpx;
			margin-top: 55rpx;
		}
	}

	.newBox,
	.recommendBox {
		position: relative;
		width: 100%;
		margin-top: 125rpx;

		.newTitle {
			width: 710rpx;
			height: 94rpx;
			margin-left: 40rpx;
		}

		.recommendTitle {
			width: 466rpx;
			height: 94rpx;
		}

		.newCover {
			width: 675rpx;
			height: 346rpx;
			margin-left: 40rpx;
			margin-top: 57rpx;
			border-radius: 15rpx;
		}

		.newItemContainer {
			width: 675rpx;
			display: flex;
			margin-left: 40rpx;
			margin-top: 20rpx;

			.newItemBoxOut {
				width: 675rpx;
				display: flex;
				overflow-x: scroll;

				// justify-content: space-between;
				.newItemBoxInner {
					width: 208rpx;
					margin-right: 30rpx;

					.newItemCover {
						width: 208rpx;
						height: 144rpx;
						border-radius: 15rpx;
					}

					.newItemName {
						display: block;
						width: 100%;
						font-size: 23rpx;
						color: #141414;
						margin-top: 35rpx;
						overflow: hidden; //超出隐藏
						text-overflow: ellipsis; //文本超出时显示省略号
						white-space: nowrap; //设置文本不换行
						font-family: 'ar';
					}

					.newItemPriceBox {
						width: 100%;
						margin-top: 15rpx;

						.priceIconNew {
							font-size: 19rpx;
							color: #f08329;
						}

						.priceNew {
							font-size: 28rpx;
							color: #f08329;
							font-family: 'am';
						}

						.priceIconOld {
							font-size: 19rpx;
							color: #8e8e8e;
							margin-left: 15rpx;
							text-decoration: line-through;
							font-family: 'ar';
						}

						.priceOld {
							font-size: 23rpx;
							color: #8e8e8e;
							text-decoration: line-through;
							font-family: 'ar';
						}
					}
				}
			}
		}
	}

	.customerBox {
		position: relative;
		width: 100%;
		margin-top: 125rpx;

		.customerTitle {
			width: 445rpx;
			height: 95rpx;
		}

		/deep/ .uni-swiper__dots-box {
			z-index: 1 !important;
		}

		.swiperBox {
			position: relative;
			width: 100%;
			height: 1000rpx;
			// margin-left: 40rpx;
			margin-top: 60rpx;
			margin-bottom: 55rpx;

			.swiper-item {
				width: 540rpx !important;
				height: 977rpx !important;
				border-radius: 15rpx;
				margin-right: 35rpx;
				display: flex;
				justify-content: center;

				.itemImg {
					width: 500rpx;
					height: 977rpx;
				}
			}
		}
	}

	.activityBox {
		position: relative;
		width: 100%;
		margin-top: 125rpx;

		.activityTitle {
			width: 713rpx;
			height: 96rpx;
			margin-left: 37rpx;
		}

		.more {
			position: absolute;
			color: #8e8e8e;
			right: 40rpx;
			top: 65rpx;
			font-family: 'ar';
			font-size: 20rpx;
		}

		/deep/ .uni-swiper__dots-box {
			z-index: 1 !important;
		}

		.swiperBox {
			position: relative;
			width: 670rpx;
			height: 387rpx;
			margin-left: 40rpx;
			margin-top: 60rpx;
			margin-bottom: 55rpx;

			.swiper-item {
				width: 100% !important;
				height: 100% !important;
				border-radius: 15rpx;
				margin-top: 0;
				margin-left: 0;

				.itemImg {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
					margin-top: 0;
					margin-left: 0;
				}
			}
		}
	}

	.healthBox {
		position: relative;
		width: 100%;
		margin-top: 95rpx;

		.swiperBox {
			position: relative;
			width: 670rpx;
			height: 387rpx;
			margin-left: 40rpx;
			margin-top: 60rpx;
			margin-bottom: 55rpx;

			.swiper-item {
				width: 100% !important;
				height: 100% !important;
				border-radius: 15rpx;
				margin-top: 0;
				margin-left: 0;

				.itemImg {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
					margin-top: 0;
					margin-left: 0;
				}
			}
		}

		.healthTitle {
			width: 453rpx;
			height: 95rpx;
		}

		.healthCover {
			width: 706rpx;
			height: 402rpx;
			margin-top: 60rpx;
			margin-left: 22rpx;
			border-radius: 15rpx;
		}

		.more {
			position: absolute;
			color: #8e8e8e;
			right: 40rpx;
			top: 65rpx;
			font-size: 20rpx;
			font-family: 'ar';
		}
	}

	.line {
		margin-top: 100rpx;
		width: 700rpx;
		height: 1rpx;
		background-color: #000000;
		margin-left: 25rpx;
	}

	.btnBox {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -270rpx;

		.btnBox1,
		.btnBox2,
		.btnBox3 {
			width: 100%;
		}

		.btnBox2 {
			position: relative;
			width: 700rpx;
			height: 112rpx;
			margin-top: 74rpx;
			display: flex;
			justify-content: space-between;

			.recommendBtn {
				width: 242rpx;
				height: 112rpx;
			}

			.bmiBtn {
				width: 472rpx;
				height: 112rpx;
			}

			.shareBtn {
				position: absolute;
				width: 34%;
				height: 100%;
				left: 0;
				z-index: 1;
				opacity: 0;
			}
		}

		.btnBox3 {
			margin-top: 35rpx;
			display: flex;
			justify-content: center;

			.arrowBtn {
				width: 31rpx;
				height: 26rpx;
			}
		}

		.btnBox4 {
			width: 660rpx;
			height: 116rpx;
			margin-top: 105rpx;
			display: flex;
			justify-content: space-around;

			.box4Item {
				width: 102rpx;
				height: 116rpx;
			}
		}

		.btnBox5 {
			width: 704rpx;
			height: 146rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;

			.box5Item {
				width: 218rpx;
				height: 146rpx;
			}
		}

		.activitySwiperBox {
			width: 676rpx;
			margin-top: 90rpx;

			// margin-left: 37rpx;
			.activitySwiper {
				position: relative;
				width: 100%;
				height: 290rpx;
				margin-top: 60rpx;

				.shareBtn1 {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index: 1;
					opacity: 0;
				}

				.activitySwiperItem,
				.activitySwiperImg {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}

			.activitySwiperLabel {
				width: 713rpx;
				height: 97rpx;
			}
		}

		.livingBtn {
			position: absolute;
			width: 200rpx;
			height: 165rpx;
			top: -102rpx;
			right: 23rpx;
		}
	}

	.index {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		min-height: calc(100vh - env(safe-area-inset-bottom));

	}

	// 胶囊提示
	.capsule-tips {
		color: #ffffff;
		padding: 12rpx 18rpx;
		border-radius: 14rpx;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		z-index: 9999;
		right: 25rpx;
	}

	.capsule-tips::after {
		content: '';
		border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
		border-right: 14rpx solid transparent;
		border-left: 14rpx solid transparent;
		position: absolute;
		top: -14rpx;
		right: 88rpx;
	}

	page {
		background-color: #ffffff;
	}
</style>